<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<style type="text/css">
    .menuLabel {
        border: 1px solid #B0BED9;
        padding: 6px;
        margin-right: 8px;
        border-radius: 0.25rem;
        font-size: 15px;
        cursor: pointer;
    }

    #loadingDiv {
        width: 100%;
        opacity: 0.5;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: gray;
        z-index: 100000;
        text-align: center;
    }

    #loadingDiv img {
        margin-top: 10%;
    }
</style>

<nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
        </li>
    </ul>

    <input type="hidden" id="baseLabel" value=""/>
    <div id="topMenuDiv" style="margin-top: 7px;"></div>

    <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">

            <a class="nav-link" data-toggle="dropdown" href="#">
                <span>${sessionScope.session_master.account}&nbsp;&nbsp;
                <i class="fa fa-cog"></i>
            </a>

            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <div class="dropdown-divider"></div>
                <a href="javascript:void(0)" class="dropdown-item" onclick="showModifyPwd()">
                    <i class="fa fa-edit mr-2"></i> 修改密码
                </a>

                <div class="dropdown-divider"></div>
                <a href="logout" class="dropdown-item">
                    <i class="fa fa-sign-out mr-2"></i> 注销
                </a>
            </div>
        </li>
    </ul>
</nav>

<div id="baseContainer" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index: 2000000;text-align: center;display: none;">
    <img src="static/img/loading.gif" style="margin-top: 10%" width="400px" height="400px"/>
</div>

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="backend/dashboard" class="brand-link">
        <img src="static/img/logo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
             style="opacity: .8">
        <span class="brand-text font-weight-light">智能环境监测平台</span>
    </a>
    <div class="sidebar">
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <li class="nav-item has-treeview menu-open">
                    <a href="backend/dashboard" class="nav-link selectMenu" id="baseLi">
                        <i class="nav-icon fa fa-dashboard"></i>

                        <p>首页</p>
                    </a>
                </li>
                <c:forEach var="n" items="${sessionScope.login_master_module_list}">
                    <li class="nav-item has-treeview menu-open">
                        <a href="${n.url}" class="nav-link selectMenu" id="${n.liName}">
                            <i class="nav-icon ${n.description}"></i>

                            <p>${n.name}</p>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </nav>
    </div>
</aside>

<div class="modal inModal fade" id="editPwdModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改密码</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>

            <div class="modal-body">
                <form role="form" class="form-group">
                    <div class="form-inline">
                        <label class="col-4">旧密码：</label>

                        <div class="col-8">
                            <input type="password" class="form-control" id="oldPassword" maxlength="20"/>
                        </div>
                    </div>
                    <div class="form-inline">
                        <label class="col-4">新密码：</label>

                        <div class="col-8">
                            <input type="password" class="form-control" id="newPassword" maxlength="20"/>
                        </div>
                    </div>
                    <div class="form-inline">
                        <label class="col-4">确认密码：</label>

                        <div class="col-8">
                            <input type="password" class="form-control" id="confirmPassword" maxlength="20"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="savePassword()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="masterCompanyId" value="${sessionScope.login_master_company_id}"/>
<input type="hidden" id="loginMasterId" value="${sessionScope.session_master_id}"/>

<div id="loadingDiv" style="display: none;">
    <img src="static/img/loading.gif" width="30%" height="auto"/>
</div>

<script type="application/javascript">
    function overMenu(self) {
        $('#topMenuDiv').children().each(function () {
            $(this).css('background-color', '');
            $(this).css('color', 'black');
        });

        $(self).css('background-color', '#007bff');
        $(self).css('color', 'white');
    }

    function afterMenu() {
        $('#topMenuDiv').children().each(function () {
            if ($(this).prop('id') === $('#baseLabel').val()) {
                $(this).css('background-color', '#007bff');
                $(this).css('color', 'white');
            } else {
                $(this).css('background-color', '');
                $(this).css('color', 'black');
            }
        });
    }

    function clickMenu(self) {
        window.location.href = $(self).next().val();
    }

    function loadMenuColor(id) {
        $('#topMenuDiv').children().each(function () {
            $(this).css('background-color', '');
            $(this).css('color', 'black');
        });

        $('#label' + id).css('background-color', '#007bff');
        $('#label' + id).css('color', 'white');

        $('#baseLabel').val('label' + id);
    }

    function showModifyPwd() {
        $("#oldPassword").val('');
        $("#newPassword").val('');
        $("#confirmPassword").val('');
        $("#editPwdModal").modal("show");
    }

    function savePassword() {
        let oldPassword = $("#oldPassword").val().trim();
        let newPassword = $("#newPassword").val().trim();
        if (oldPassword === "") {
            info("warning", "请输入旧密码");
            $("#oldPassword").focus();
            return;
        }
        if (newPassword === "") {
            info("warning", "请输入新密码");
            $("#newPassword").focus();
            return;
        }
        if (newPassword !== $("#confirmPassword").val().trim()) {
            info("warning", "确认密码不一致");
            $("#confirmPassword").focus();
            return;
        }
        $.post('/modifyPwd', {
            oldPwd: oldPassword,
            newPwd: newPassword
        }, function (result) {
            if (result.code === 0) {
                info('密码修改成功', 'success');

                $("#editPwdModal").modal("hide");
            } else {
                info(result.msg, 'error');
            }
        });
    }

    function changeSearchSelect() {
        $(".combo-select").addClass('form-control');
        $(".combo-select").css("color", "#495057");
        $(".combo-select").css("border-color", "#ced4da");
        $(".combo-select").css("line-height", "22px");
    }

    function startLoading() {
        $('#baseContainer').css('display', '');
    }

    function endLoading() {
        $('#baseContainer').css('display', 'none');
    }
</script>
